<template>
  <view class="page-container">
    <u-navbar back-icon-color="#FFF" title="进度追踪" title-color="#FFF" :background="{
					background: '#00a0e9',
				}">
    </u-navbar>

    <div class="content">
      <timeline>
        <timelineItem
            v-for="(it, index) in steps" :key='index'
            :color="getColor(index)"
            :class="{last:index === steps.length-1}">
          <view class="name" slot='left'></view>
          <view class="tripItem">
            <view class="title">{{ it.stepname }}</view>
            <view class="tips">
              <span style="margin-right: 20rpx;" v-if="it.username">{{ it.username }} </span>
              <span v-if="it.createdate">{{ it.createdate }}</span>
            </view>
            <view class="tips">{{ it.auditname }}</view>
            <view class="tips" v-if="it.auditmsg">备注说明：{{ it.auditmsg }}</view>
          </view>
        </timelineItem>
      </timeline>
    </div>
  </view>
</template>

<script>
import timeline from '../../components/chenbin-timeline/timeLine.vue'
import timelineItem from '../../components/chenbin-timeline/timelineItem.vue'

export default {
  components: {
    timeline,
    timelineItem
  },
  data() {
    return {
      steps: [],
      done: null
    }
  },
  methods: {
    getColor(index) {
      if (index === 0) {
        if (this.done) {
          return '#10be28'
        } else {
          return '#ec6817'
        }
      } else {
        return '#10be28'
      }
    },
  },
  async onLoad(options) {
    uni.showLoading({
      title:'正在加载'
    })
    let { data } = await this.api.getOpenTask({
      taskId: options.taskId,
      openStatus: options.openStatus
    })
    this.steps = data.auditLogList
    uni.hideLoading()
  }
}
</script>

<style lang="less">
.tripItem {
  .title {
    font-weight: 600;
    font-size: 34rpx;
  }

  .tips {
    color: #666666;
    font-size: 30rpx;
    margin: 10rpx 0;
  }
}
</style>
